@import "tailwindcss";
@import "solid-notifications/index.css";

@theme {
  --font-mulish-variable: "Mulish Variable", sans-serif;
  --font-titles: "Bai Jamjuree", sans-serif;

  --color-accent: rgba(200, 120, 175, 1);
  --color-primary: rgba(200, 170, 215, 1);
  --color-secondary: rgba(120, 60, 110, 1);
  --color-secondary-30: rgba(120, 60, 110, 0.3);
  --color-secondary-20: rgba(120, 60, 110, 0.2);
  --color-text: rgba(245, 235, 250, 1);
  --color-muted: rgba(245, 235, 250, 0.6);
  --color-background: rgba(15, 10, 20, 1);
  --color-background-70: rgba(15, 10, 20, 0.7);
  --color-background-30: rgba(15, 10, 20, 0.3);
  --color-popup-background: rgba(20, 15, 25, 1);
  --color-resume-accent: rgba(110, 180, 185, 1);
  --color-warning-orange: rgba(240, 100, 50, 1);
  --color-success: rgba(120, 200, 150, 1);
  --color-error: rgba(230, 90, 90, 1);
}

@layer base {
  :root[data-theme="dark-purple"] {
    --color-accent: rgba(200, 120, 175, 1);
    --color-primary: rgba(200, 170, 215, 1);
    --color-secondary: rgba(120, 60, 110, 1);
    --color-secondary-30: rgba(120, 60, 110, 0.3);
    --color-secondary-20: rgba(120, 60, 110, 0.2);
    --color-text: rgba(245, 235, 250, 1);
    --color-muted: rgba(245, 235, 250, 0.6);
    --color-background: rgba(15, 10, 20, 1);
    --color-background-70: rgba(15, 10, 20, 0.7);
    --color-background-30: rgba(15, 10, 20, 0.3);
    --color-popup-background: rgba(20, 15, 25, 1);
    --color-resume-accent: rgba(110, 180, 185, 1);
    --color-warning-orange: rgba(240, 100, 50, 1);
    --color-success: rgba(120, 200, 150, 1);
    --color-error: rgba(230, 90, 90, 1);
  }

  :root[data-theme="forest-dark-green"] {
    --color-accent: rgba(50, 160, 90, 1);
    --color-primary: rgba(70, 180, 110, 1);
    --color-secondary: rgba(30, 90, 50, 1);
    --color-secondary-30: rgba(30, 90, 50, 0.3);
    --color-secondary-20: rgba(30, 90, 50, 0.2);
    --color-text: rgba(240, 250, 240, 1);
    --color-muted: rgba(210, 230, 210, 0.7);
    --color-background: rgba(10, 15, 10, 1);
    --color-background-70: rgba(10, 15, 10, 0.7);
    --color-background-30: rgba(10, 15, 10, 0.3);
    --color-popup-background: rgba(15, 25, 15, 1);
    --color-resume-accent: rgba(90, 190, 120, 1);
    --color-warning-orange: rgba(220, 120, 70, 1);
    --color-success: rgba(80, 200, 120, 1);
    --color-error: rgba(220, 80, 80, 1);
  }

  :root[data-theme="ocean-dark-blue"] {
    --color-accent: rgba(50, 100, 180, 1);
    --color-primary: rgba(70, 130, 200, 1);
    --color-secondary: rgba(30, 60, 100, 1);
    --color-secondary-30: rgba(30, 60, 100, 0.3);
    --color-secondary-20: rgba(30, 60, 100, 0.2);
    --color-text: rgba(240, 245, 255, 1);
    --color-muted: rgba(200, 215, 235, 0.7);
    --color-background: rgba(10, 15, 30, 1);
    --color-background-70: rgba(10, 15, 30, 0.7);
    --color-background-30: rgba(10, 15, 30, 0.3);
    --color-popup-background: rgba(15, 25, 45, 1);
    --color-resume-accent: rgba(90, 140, 220, 1);
    --color-warning-orange: rgba(220, 120, 70, 1);
    --color-success: rgba(80, 180, 120, 1);
    --color-error: rgba(220, 90, 80, 1);
    --color-highlight: rgba(100, 180, 255, 0.2);
  }

  :root[data-theme="desert-light-beige"] {
    --color-accent: rgba(155, 95, 55, 1);
    --color-primary: rgba(225, 205, 165, 1);
    --color-secondary: rgba(165, 125, 85, 1);
    --color-secondary-30: rgba(165, 125, 85, 0.3);
    --color-secondary-20: rgba(165, 125, 85, 0.2);
    --color-text: rgba(40, 30, 15, 1);
    --color-muted: rgba(60, 45, 25, 0.7);
    --color-background: rgba(245, 235, 215, 1);
    --color-background-70: rgba(245, 235, 215, 0.7);
    --color-background-30: rgba(245, 235, 215, 0.3);
    --color-popup-background: rgba(230, 215, 190, 1);
    --color-resume-accent: rgba(185, 145, 100, 1);
    --color-warning-orange: rgba(200, 85, 35, 1);
    --color-success: rgba(110, 140, 80, 1);
    --color-error: rgba(190, 75, 55, 1);
    --color-highlight: rgba(255, 240, 185, 1);
  }

  :root[data-theme="dark-orange-mead"] {
    --color-accent: rgba(180, 85, 20, 1);
    --color-primary: rgba(200, 100, 30, 1);
    --color-secondary: rgba(140, 65, 15, 1);
    --color-secondary-30: rgba(140, 65, 15, 0.3);
    --color-secondary-20: rgba(140, 65, 15, 0.2);
    --color-text: rgba(240, 220, 200, 1);
    --color-muted: rgba(220, 200, 180, 0.5);
    --color-background: rgba(16, 10, 6, 1);
    --color-background-70: rgba(25, 15, 10, 0.7);
    --color-background-30: rgba(25, 15, 10, 0.3);
    --color-popup-background: rgba(20, 10, 5, 1);
    --color-resume-accent: rgba(200, 100, 50, 1);
    --color-warning-orange: rgba(163, 66, 22, 1);
  }

  :root[data-theme="blue-cyan"] {
    --color-accent: rgba(0, 128, 128, 1);
    --color-primary: rgba(64, 224, 208, 1);
    --color-secondary: rgba(0, 102, 102, 1);
    --color-secondary-30: rgba(0, 102, 102, 0.3);
    --color-secondary-20: rgba(0, 102, 102, 0.2);
    --color-text: rgba(240, 255, 255, 1);
    --color-muted: rgba(200, 240, 240, 0.5);
    --color-background: rgba(10, 20, 25, 1);
    --color-background-70: rgba(10, 20, 25, 0.7);
    --color-background-30: rgba(10, 20, 25, 0.3);
    --color-popup-background: rgba(5, 15, 20, 1);
    --color-resume-accent: rgba(0, 204, 204, 1);
    --color-warning-orange: rgba(255, 127, 80, 1);
  }

  :root[data-theme="gnome-dark"] {
    --color-accent: rgba(53, 132, 228, 1);
    --color-primary: rgba(98, 160, 234, 1);
    --color-secondary: rgba(30, 80, 160, 1);
    --color-secondary-30: rgba(30, 80, 160, 0.6);
    --color-secondary-20: rgba(255, 255, 255, 0.2);
    --color-text: rgba(246, 245, 244, 1);
    --color-muted: rgba(246, 245, 244, 0.6);
    --color-background: rgba(34, 34, 38, 1);
    --color-background-70: rgba(34, 34, 38, 0.7);
    --color-background-30: rgba(34, 34, 38, 0.3);
    --color-popup-background: rgba(46, 46, 50, 1);
    --color-resume-accent: rgba(98, 160, 234, 1);
    --color-warning-orange: rgba(255, 120, 0, 1);
    --color-success: rgba(87, 227, 137, 1);
    --color-error: rgba(224, 27, 36, 1);
  }

  :root[data-theme="gnome-light"] {
    --color-accent: rgba(53, 132, 228, 1);
    --color-primary: rgba(98, 160, 234, 1);
    --color-secondary: rgba(30, 80, 160, 1);
    --color-secondary-30: rgba(30, 80, 160, 0.8);
    --color-secondary-20: rgba(0, 0, 0, 0.2);
    --color-text: rgba(24, 24, 27, 1);
    --color-muted: rgba(24, 24, 27, 0.8);
    --color-background: rgba(240, 244, 249, 1);
    --color-background-70: rgba(240, 244, 249, 0.7);
    --color-background-30: rgba(240, 244, 249, 0.3);
    --color-popup-background: rgba(255, 255, 255, 1);
    --color-resume-accent: rgba(98, 160, 234, 1);
    --color-warning-orange: rgba(255, 120, 0, 1);
    --color-success: rgba(46, 194, 126, 1);
    --color-error: rgba(224, 27, 36, 1);
  }
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

}

@layer components {
  .text-categories {
    font-family: var(--font-mulish-variable);
    line-height: normal;
    letter-spacing: 0;
  }

  /* Custom Scrollbar */
  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    border-radius: 10px;
    display: block;
    /* Override display: none from html/body if needed */
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background-color: transparent;
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary-30);
    border-radius: 10px;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-secondary);
  }
}

body {
  font-family: "Mulish Variable";
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  user-select: none;
  overflow-y: scroll;
  margin: 0;
  padding: 0;
  color: var(--color-text);
}

body::-webkit-scrollbar {
  display: none;
}


.sn-theme-dark {
  --sn-toast-bg-color: var(--color-popup-background);
  --sn-toast-text-color: var(--color-text);

  --sn-toast-border-radius: 10px;
  --sn-toast-box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(200, 170, 215, 0.12);


  --sn-toast-padding: 14px 18px;
  --sn-toast-gap: 14px;
  --sn-toast-font-size: 0.95rem;
  --sn-wrapper-max-width: 380px;

  --sn-progress-bar-height: 3px;
  --sn-progress-bar-color: var(--color-accent);

  --sn-icon-size: 1.15rem;
  --sn-icon-fill: var(--color-accent);
  --sn-icon-stroke: var(--color-text);

  --sn-dismiss-btn-size: 1.3rem;
  --sn-dismiss-btn-border-radius: 6px;
  --sn-dismiss-btn-color: var(--color-muted);
  --sn-dismiss-btn-hover-color: var(--color-text);
}

.sn-toast {
  backdrop-filter: blur(10px) saturate(150%);
}

/* Scrollbar customization */
html::-webkit-scrollbar {
  background-color: rgba(43, 42, 42, 0.2);
  border-radius: 18px;
  display: none;
}

html::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 18px;
}

/* Popup container */
.popup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Ensure the popup takes full screen */
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  overflow: hidden;
}

/* Scrollbar customization for changelog */
.popup-container::-webkit-scrollbar {
  width: 8px;
  border-radius: 10px;
}

.popup-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}

/* Ensure scrollbar respects the rounded corners */
.popup-container {
  border-radius: 20px;
  padding-right: 10px;
  /* Add space on the right to ensure scrollbar fits well */
  box-sizing: border-box;
  overflow-y: auto;
}

.main-content::-webkit-scrollbar {
  display: none;
}

html,
body,
#root {
  height: 100vh;
  width: 100vw;
  margin: 0;
}